<template>
    <div class="latestPage flex_column">
        <div class="flex_between">
            <div class="selectVue flex">
                <el-select v-model="weChatId" placeholder="选择微信AI客服">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                            <span style="color: #333; font-weight: normal;">{{ item.name }}</span>
                        </el-option>
                    </el-select>
                <el-input v-model="key" placeholder="请输入你要找的微信号" style="margin-left: 10px; width: 220px;" :clearable="true"></el-input>
                <div class="btn">搜索</div>
            </div>
            <div class="btnVue" @click="$jump('report')">报表设置</div>
        </div>
        
        <!-- 跟进列表 -->
        <div class="latestContent flex_1">
            <el-table :data="list" height="100%" border width="100%" class="center-table">
                <!-- 列表为空 -->
                <div slot="empty" class="flex_column align_center">
                    <img src="../../assets/empty.png" slot="empty" style="width: 313px; height: 172px; margin-bottom: 20px">
                    <span style="color: #101010; font-weight: 600; font-size: 18px">当前列表是空哦~</span>
                </div>

                <!-- 名称/备注 -->
                <el-table-column
                    prop="name"
                    label="名称/备注"
                    width="150"
                ></el-table-column>

                <!-- 微信号 -->
                <el-table-column
                    prop="wechatNumber"
                    label="微信号"
                    width="150"
                ></el-table-column>

                <!-- 标签 -->
                <el-table-column prop="tag" label="标签" :show-overflow-tooltip="true">
                    <template>
                        <div class="tagVue flex_center align_center">
                            <el-tag type="info" class="elTag">咨询多</el-tag>
                            <el-tag type="info" class="elTag">意向高</el-tag>
                        </div>
                    </template>
                </el-table-column>

                <!-- AI总结 -->
                <el-table-column 
                    prop="total" 
                    align="center" 
                    label="AI总结" 
                ></el-table-column>

                <!-- 评级 -->
                <el-table-column prop="pj" label="评级" width="100"></el-table-column>

                <!-- 聊天记录 -->
                <el-table-column prop="record" label="聊天记录" width="100"></el-table-column>

                <!-- 自动回复 -->
                <el-table-column prop="state" label="自动回复" :show-overflow-tooltip="true" width="100">
                    <template slot-scope="scope">
                        <div class="state" :class="{active: scope.row.state}" @click="handleState(scope.row)">
                            <div class="dot dot_right" v-if="scope.row.state"></div>
                            <div class="dot dot_left" v-else></div>
                        </div>
                    </template>
                </el-table-column>

                <!-- 备注 -->
                <el-table-column 
                    prop="remark" 
                    label="备注"
                    :show-overflow-tooltip="true"
                ></el-table-column>


                <!-- 操作 编辑 删除 -->
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <div class="flex_center">
                            <el-button size="mini" type="edit" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button size="mini" type="show" @click="handleDelete(scope.row)">查看聊天</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="paginationVue flex_center align_center">
            <el-pagination background layout="total, prev, pager, next" :page-size="pageSize" :total="total"></el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            key: "",
            list: [],
            options: [],
            total: 0,
            pageNum: 1,
            pageSize: 15,
            weChatId: ""
        }
    },
    created(){
        this.getWeChatList()
    },
    methods: {
        // 查询微信列表
        getWeChatList(){
            this.$post("/front/userWechat/wechatList").then(res=>{
                if(res.data.code===0) {
                    this.options = res.data.obj.list
                    if(this.options.length===0) return
                    this.weChatId = this.options[0].id
                    this.getList()
                }
            })
        },
        
        // 获取跟进列表
        getList(){

        }
    }
}
</script>

<style lang="less" scoped>
:deep(.el-button--delete) {
    background: #d81e06;
    span {
        color: #fff !important;
    }
}
:deep(.el-button--edit) {
    background: #AAA;
    span {
        color: #fff !important;
    }
}
:deep(.center-table td), 
:deep(.center-table th) {
  text-align: center !important;
}
:deep(.center-table th) {
  background: #f5f5f5 !important;
}
:deep(.el-button--show) {
    background: #0147fd;
    span {
        color: #fff !important;
    }
}
:deep(.el-button--edit) {
    background: #AAA;
    span {
        color: #fff !important;
    }
}
:deep(.el-tag--info) {
    margin: 0 5px;
}
:deep(.el-radio__input.is-checked .el-radio__inner) {
    border-color: #0147fd;
    background: #0147fd;
}
:deep(.el-radio__input.is-checked+.el-radio__label) {
    color: #0147fd;
}

.latestPage {
    width: 100%;
    height: 100%;
    padding: 20px 20px 0;
    .selectVue {
        width: 100%;
        height: 50px;
        .btn {
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 5px;
            background: #0147fd;
            color: #fff;
            margin-left: 10px;
            cursor: pointer;
        }
    }
    .btnVue {
        width: 100px;
        height: 44px;
        text-align: center;
        line-height: 44px;
        border-radius: 5px;
        background: #0147fd;
        color: #fff;
        margin-left: 10px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }
    .latestContent {
        width: 100%;
        margin-top: 10px;
        .state {
            width: 40px;
            height: 20px;
            background: #AAA;
            border-radius: 10px;
            margin: 0 auto;
            position: relative;
            cursor: pointer;
            .dot {
                width: 16px;
                height: 16px;
                background: #fff;
                border-radius: 50%;
                position: absolute;
            }
            .dot_left {
                left: 2px;
                top: 2px;
            }
            .dot_right {
                right: 2px;
                top: 2px;
            }
        }
        .active {
            background: #0147fd;
        }
    }
    .paginationVue {
        width: 100%;
        height: 60px;
    }
}    

</style>